<template>
  <div class="home">
    <div class="lef" :style="{ width: widths }">
      <el-row class="tac">
        <el-col :span="24">
          <div class="imgs">
            <div class="imgs_in" :style="{ width: widths1 }">
              <img src="../assets/logo.png" alt="" />
            </div>

            <p v-show="show1">电商管理系统</p>
          </div>
          <el-menu
            :collapse="isCollapse"
            :default-active="defaultrouter"
            class="el-menu-vertical-demo"
            background-color="#191a23"
            text-color="#fff"
            active-text-color="deepskyblue"
            :unique-opened="true"
            :router="true"
            @select="selectFun"
          >
            <el-menu-item index="/index">
              <i class="el-icon-s-home"></i>
              <span slot="title">主页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-finance"></i>
                <span>商品</span>
              </template>
              <el-menu-item-group>
                <!-- <template slot="title">分组一</template> -->
                <el-menu-item index="/ShopTube">商品管理</el-menu-item>
                <el-menu-item index="/shop_classify">商品分类</el-menu-item>

                <el-menu-item index="/product">商品评论</el-menu-item>

                <el-menu-item index="/specification">商品规格</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span>订单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/order">订单管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>用户</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/usermanage">用户管理</el-menu-item>
                <el-menu-item index="/MemberClass">会员等级</el-menu-item>
                <el-menu-item index="/usergroup">用户分组</el-menu-item>
                <el-menu-item index="/userlabel">用户标签</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-grape"></i>
                <span>分销</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1">分销设置</el-menu-item>
                <el-menu-item index="5-2">分销员管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-promotion"></i>
                <span>营销</span>
              </template>
              <el-menu-item-group>
                <el-submenu index="6-1">
                  <template slot="title">优惠券</template>
                  <el-menu-item index="/DiscountsTemplate">优惠券模板</el-menu-item>
                  <el-menu-item index="/discount">优惠券列表</el-menu-item>
                  <el-menu-item index="/history">用户领取记录</el-menu-item>
                </el-submenu>
                <el-submenu index="6-2">
                  <template slot="title">砍价管理</template>
                  <el-menu-item index="6-2-1">砍价商品</el-menu-item>
                </el-submenu>
                <el-submenu index="6-3">
                  <template slot="title">拼团管理</template>
                  <el-menu-item index="6-3-1">拼团商品</el-menu-item>
                  <el-menu-item index="6-3-2">拼团列表</el-menu-item>
                </el-submenu>
                <el-submenu index="6-4">
                  <template slot="title">秒杀管理</template>
                  <el-menu-item index="6-4-1">秒杀商品</el-menu-item>
                  <el-menu-item index="6-4-2">秒杀配置</el-menu-item>
                </el-submenu>
                <el-submenu index="6-5">
                  <template slot="title">积分</template>
                  <el-menu-item index="6-5-1">积分配置</el-menu-item>
                  <el-menu-item index="6-5-2">积分日志</el-menu-item>
                </el-submenu>
                <el-submenu index="6-6">
                  <template slot="title">直播管理</template>
                  <el-menu-item index="6-6-1">直播间管理</el-menu-item>
                  <el-menu-item index="6-6-2">直播商品管理</el-menu-item>
                  <el-menu-item index="6-6-3">主播管理</el-menu-item>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-ice-drink"></i>
                <span>财务</span>
              </template>
              <el-menu-item-group>
                <el-submenu index="7-1">
                  <template slot="title">财务操作</template>
                  <el-menu-item index="7-1-1">提现申请</el-menu-item>
                </el-submenu>
                <el-submenu index="7-2">
                  <template slot="title">财务记录</template>
                  <el-menu-item index="/rechargerecord">充值记录</el-menu-item>
                  <el-menu-item index="/MoneyRecord">资金记录</el-menu-item>
                </el-submenu>
                <el-submenu index="7-3">
                  <template slot="title">佣金记录</template>
                  <el-menu-item index="/CommissionRecord"
                    >佣金记录</el-menu-item
                  >
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="11">
              <template slot="title">
                <i class="el-icon-reading"></i>
                <span>内容</span>
              </template>
              <el-menu-item-group>
                <!-- <template slot="title">分组一</template> -->
                <el-menu-item index="/writer">文章管理</el-menu-item>
                <el-menu-item index="/Categories">文章分类</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>设置</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="8-1">系统设置</el-menu-item>
                <el-menu-item index="8-2">客服管理</el-menu-item>
                <el-submenu index="8-3">
                  <template slot="title">管理权限</template>
                  <el-menu-item index="8-3-1">身份管理</el-menu-item>
                  <el-menu-item index="/AdministratorList"
                    >管理员列表</el-menu-item
                  >
                  <el-menu-item index="8-3-3">权限规则</el-menu-item>
                </el-submenu>
                <el-submenu index="8-4">
                  <template slot="title">页面管理</template>
                  <el-menu-item index="8-4-1">页面设计</el-menu-item>
                  <el-menu-item index="8-4-2">页面链接</el-menu-item>
                </el-submenu>
                <el-submenu index="8-5">
                  <template slot="title">短信设置</template>
                  <el-menu-item index="8-5-1">短信账户</el-menu-item>
                  <el-menu-item index="8-5-2">短信模板</el-menu-item>
                  <el-menu-item index="8-5-3">短信购买</el-menu-item>
                  <el-menu-item index="8-5-4">短信开关</el-menu-item>
                </el-submenu>
                <el-submenu index="8-6">
                  <template slot="title">数据配置</template>
                  <el-menu-item index="/SignIn">签到天数配置</el-menu-item>
                  <el-menu-item index="/OrderDetails"
                    >订单详情动态</el-menu-item
                  >
                  <el-menu-item index="/PersonalCenter"
                    >个人中心菜单</el-menu-item
                  >
                  <el-menu-item index="/HotList">热门榜单推荐</el-menu-item>
                  <el-menu-item index="/NewProducts">首发新品推荐</el-menu-item>
                  <el-menu-item index="/PromotionItem"
                    >促销单品推荐</el-menu-item
                  >
                  <el-menu-item index="/PersonalCenter">个人中心分销</el-menu-item>
                  <el-menu-item index="/Recommendation">精品推荐</el-menu-item>
                </el-submenu>
                <el-submenu index="8-7">
                  <template slot="title">提货单设置</template>
                  <el-menu-item index="/pickuper">提货点</el-menu-item>
                  <el-menu-item index="/verifier">核销员</el-menu-item>
                  <el-menu-item index="8-7-3">核销订单</el-menu-item>
                </el-submenu>
                <el-submenu index="8-8">
                  <template slot="title">物流设置</template>
                  <el-menu-item index="/city">城市数据</el-menu-item>
                  <el-menu-item index="/company">物流公司</el-menu-item>
                  <el-menu-item index="8-8-3">运费模板</el-menu-item>
                  <el-menu-item index="8-8-4">物流配置</el-menu-item>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>应用</span>
              </template>
              <el-menu-item-group>
                <el-submenu index="9-1">
                  <template slot="title">公众号</template>
                  <el-menu-item index="9-1-1">微信菜单</el-menu-item>
                  <el-menu-item index="/vxtemplate">微信模板消息</el-menu-item>
                  <el-menu-item index="9-1-3">图文管理</el-menu-item>
                  <el-submenu index="9-1-4">
                      <template slot="title">自动回复</template>
                      <el-menu-item index="/attention">微信关注回复</el-menu-item>
                      <el-menu-item index="/keyword">关键字回复</el-menu-item>
                      <el-menu-item index="/invalid">无效关键字回复</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="9-2">
                  <template slot="title">小程序</template>
                  <el-menu-item index="9-2-1">小程序订阅</el-menu-item>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="10">
              <template slot="title">
                <i class="el-icon-trophy"></i>
                <span>维护</span>
              </template>
              <el-menu-item-group>
                <el-submenu index="10-1">
                  <template slot="title">开发配置</template>
                  <el-menu-item index="/maintain/classify"
                    >配置分类</el-menu-item
                  >
                  <el-menu-item index="/maintain/data">组合数据</el-menu-item>
                </el-submenu>
                <el-submenu index="10-2">
                  <template slot="title">安全维护</template>
                  <el-menu-item index="10-2-1">刷新缓存</el-menu-item>
                  <el-menu-item index="10-2-2">系统日志</el-menu-item>
                  <el-menu-item index="10-2-3">文件效验</el-menu-item>
                  <el-menu-item index="10-2-4">清除数据</el-menu-item>
                  <el-menu-item index="10-2-5">数据备份</el-menu-item>
                  <el-menu-item index="10-2-6">商业授权</el-menu-item>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="rei">
      <div class="rei_one">
        <div class="rei_one_one">
          <div @click="suoFun"><i class="el-icon-s-fold"></i></div>
          <div @click="reload"><i class="el-icon-refresh-left"></i></div>
          <div>
            <Bread></Bread>
          </div>
        </div>
        <div class="rei_one_two">
          <div>
            <el-input
              v-model="input"
              class="inps"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div><i class="el-icon-s-help"></i></div>
          <div @click="bigFun"><i class="el-icon-monitor"></i></div>
          <div>
            <el-popover placement="bottom" width="200" trigger="click">
              <el-tabs :stretch="true" v-model="消息" @tab-click="handleClick">
                <el-tab-pane label="消息" name="消息">消息</el-tab-pane>
                <el-tab-pane label="待办" name="待办">待办</el-tab-pane>
              </el-tabs>
              <el-badge is-dot class="item" slot="reference"
                ><i class="el-icon-pear"></i
              ></el-badge>
            </el-popover>
          </div>
          <div>
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ names }}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-user"
                  >个人中心</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-switch-button"
                  ><span @click="logintui">退出登录</span></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 动态导航 -->
      <div class="condition">
        <el-tag
          @click="tagFun(tag)"
          :key="tag"
          v-for="tag in routeArr"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
          :effect="tag === defaultrouter ? 'dark' : 'plain' "  
          :type="tag === defaultrouter ? '' : 'info' "
          style="margin-left:4px;">
          {{namess[tag]}}
        </el-tag>
      </div>

      <!-- 局部页面 -->
      <div class="part">
        <router-view v-if="isRouterAlive" />
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import { mapState, mapActions } from "vuex";
import { homelist } from "../api/index";

import Bread from "../components/Breadcrumb";
import screenfull from "screenfull";
export default {
  provide() {
    return {
      reload: this.reload,
    };
  },
  name: "Home",
  components: {
    Bread,
  },
  data() {
    return {
      isRouterAlive: true,
      names: "未登录",
      input: "",
      isCollapse: false,
      widths: "202px",
      widths1: "30%",
      routeArr:['/index'],
      defaultrouter:'/index',
      show1:true,
      namess:{
        "/index":'主页',
        "/ShopTube":"商品管理",
        "/shop_classify":"商品分类",
        "/product":"商品评论",
        "/specification":"商品规格",
        '/order':"订单管理",
        "/usermanage":"用户管理",
        "/usergroup":"用户分组",
        "/userlabel":"用户标签",
        "/rechargerecord":'充值记录',
        "/vxtemplate":'微信模板消息',
        "/writer":'文章管理',
        "/addbooks":'添加文章',
         '/discount':"优惠券列表",
         '/history':"用户领取记录",
         '/city':"城市数据",
         '/company':"物流公司",
         "/Categories":'文章分类',
         '/pickuper':'提货点',
         "/MoneyRecord":"资金记录",
         "/CommissionRecord":"佣金记录",
         "/AdministratorList":"管理员列表",
         "/verifier":'核销员',
         "/attention":'微信关注回复',
         "/keyword":'关键字回复',
         "/invalid":'无效关键字回复',
         "/SignIn":"签到天数配置",
         "/OrderDetails":"订单详情动态图",
         "/PersonalCenter":"个人中心菜单",
         "/HotList":"热门榜单推荐",
         "/NewProducts":"首发新品推荐",
         "/PromotionItem":"促销单品推荐",
         "/maintain/classify":"配置分类",
         "/maintain/data":"组合数据",
         "/Distribution":"个人中心分销海报",
         "/Recommendation":"精品推荐",
         "/DiscountsTemplate":"优惠券模板"
      }
    };
  },
  computed: {
    ...mapState("modules", ["name"]),
    breadList() {
      console.log(this.$route.matched[0].meta.breadList);
      return this.$route.matched[0].meta.breadList || [];
    },
  },
  methods: {
    ...mapActions("modules", ["nameFun"]),
    ...mapActions("modules", ["tokenFun"]),
    //退出登录
    logintui() {
      this.$router.push("/login");
      localStorage.setItem("token", "");
      this.nameFun("未登录");
      this.tokenFun("");
    },
    //放大全屏
    bigFun() {
      screenfull.toggle();
    },
    //局部刷新
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    tagFun(tag) {
      if (this.$route.path !== tag) {
        this.$router.push(tag);
        this.defaultrouter = tag;
      } else {
        this.defaultrouter = tag;
      }
    },
    handleClose(tag) {
      if (this.routeArr.length !== 1) {
        this.routeArr.splice(this.routeArr.indexOf(tag), 1);
        this.$router.push(this.routeArr[this.routeArr.length - 1]);
        this.defaultrouter = this.routeArr[this.routeArr.length - 1];
        localStorage.setItem("routes", JSON.stringify(this.routeArr));
      } else {
        this.defaultrouter = this.routeArr[0];
      }
    },
    selectFun(index, indexPath) {
      if (!this.routeArr.includes(index)) {
        this.routeArr.push(index);
        localStorage.setItem("routes", JSON.stringify(this.routeArr));
        this.defaultrouter = this.routeArr[this.routeArr.length - 1];
      } else {
        this.defaultrouter = index;
      }
    },
    suoFun() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.widths = "64px";
        this.show1 = false;
        this.widths1 = "100%";
      } else {
        this.widths = "202px";
        this.show1 = true;
        this.widths1 = "30%";
      }
    },
  },
  created() {
    if (this.name === "未登录") {
      this.$router.push("/login");
    } else {
      this.names = this.name;
    }

    if (this.$route.path !== "/index") {
      this.routeArr.push(this.$route.path);
    } else {
      localStorage.setItem("routes", JSON.stringify(this.routeArr));
    }
    if (localStorage.getItem("routes")) {
      this.routeArr = JSON.parse(localStorage.getItem("routes"));
    }

    this.defaultrouter = this.$route.path;
  },
};
</script>
<style>
.el-table__expanded-cell[class*="cell"] {
  padding: 0 !important;
}
</style>
<style lang="scss" scope>
.el-col-8 {
  padding: 20px;
  box-sizing: border-box;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
th,
td {
  text-align: center !important;
  vertical-align: middle !important;
}

.item {
  margin-top: 0px;
  margin-right: 20px;
}

.imgs {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f1f1f1;
  height: 60px;
  .imgs_in {
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  p {
    width: 70%;
    height: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-family: "华文琥珀";
  }
}

.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #f5f7f9;
  .lef {
    height: 100vh;
    background: #191a23;
    transition: all 0.2s linear;
    overflow-y: auto ;
  }
  .lef::-webkit-scrollbar {
    display: none;
  }
  .rei {
    flex: 1;
    height: 100vh;
    background: #f5f7f9;
    overflow: auto;
    .rei_one {
      width: 100%;
      height: 50px;
      background: white;
      box-shadow: 2px 2px 2px #ccc;
      display: flex;
      justify-content: space-between;
      div {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
}

.lef::-webkit-scrollbar{
  display: none;
}
.rei::-webkit-scrollbar{
  display: none;
}

.rei_one > div:nth-child(1) {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.home::-webkit-scrollbar {
  display: none;
}
.rei::-webkit-scrollbar {
  display: none;
}
.rei > .rei_one > .rei_one_one > div {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rei > .rei_one > .rei_one_one > div:nth-child(1) {
  font-size: 18px;
}
.rei > .rei_one > .rei_one_one > div:nth-child(2) {
  font-size: 18px;
}
.rei > .rei_one > .rei_one_one > div:nth-child(3) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 250px;
  height: 100%;
}

.rei > .rei_one > .rei_one_one > div:nth-child(3) > .bread {
  width: 100%;
}

.rei > .rei_one > .rei_one_one > div > div > .el-breadcrumb {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.rei > .rei_one > .rei_one_two > div {
  width: 50px;
  height: 100%;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rei > .rei_one > .rei_one_two > div:nth-child(1) {
  flex: 1;
  height: 100%;
}
.rei > .rei_one > .rei_one_two > div:nth-child(1) > .inps {
  width: 100%;
}

.rei > .rei_one > .rei_one_two > div:nth-child(5) {
  width: 66px;
  display: flex;
  justify-content: flex-start;
  font-family: "微软雅黑";
  font-size: 12px;
}

.condition {
  width: 100%;
  margin-top: 4px;
  height: 40px;
  background: #f5f7f9;
  box-shadow: 2px 2px 2px #ccc;
  display: flex;
  align-items: center;
}

.part {
  width: 100%;
  height: calc(100% - 94px);
  background: #f5f7f9;
  overflow: auto;
  padding: 0 6px;
  box-sizing: border-box;
}

.part::-webkit-scrollbar {
  display: none;
}
</style>
